{extend name="../../base/view/common/base" /}
<!-- 主体 -->
{block name="body"}
<div class="p-3">
    <form class="layui-form gg-form-bar border-x border-t" lay-filter="barsearchform">

        <div class="layui-input-inline" style="width:240px;">
            <input type="text" name="keywords" placeholder="输入标题" class="layui-input" autocomplete="off"/>
        </div>
        <div class="layui-input-inline" style="width:150px;">
            <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform"><i
                    class="layui-icon layui-icon-search mr-1"></i>搜索
            </button>
            <button type="reset" class="layui-btn layui-btn-reset" lay-filter="reset">清空</button>
        </div>
    </form>
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <span class="layui-btn layui-btn-sm" title="薪资生成" lay-event="produce">+ 薪资生成</span>
    </div>
</script>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
    const moduleInit = ['tool', 'employeepicker', 'laydatePlus'];

    function gouguInit() {
        var form = layui.form, table = layui.table, tool = layui.tool, laydatePlus = layui.laydatePlus,
            laydate = layui.laydate, dropdown = layui.dropdown;
        layui.pageTable = table.render({
            elem: '#test',
            title: '薪资列表',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', {title: '导出EXCEL', layEvent: 'LAYTABLE_EXCEL', icon: 'layui-icon-export'}],
            url: "/finance/salary/index", //数据接口
            cellMinWidth: 80,
            page: true, //开启分页
            limit: 20,
            cols: [
                [ //表头
                    {
                        field: 'id',
                        title: '编号',
                        align: 'center',
                        width: 80,
                        templet: function (d) {
                            return d.LAY_INDEX + 1
                        }
                    }, {
                    field: 'title',
                    title: '薪资表',
                }, {
                    field: 'month',
                    title: '发放月份',
                    align: 'center',
                }, {
                    field: 'number',
                    title: '总人数',
                    align: 'center',
                }, {
                    field: 'money',
                    title: '总金额',
                    align: 'center',
                }, {
                    field: 'check_status', title: '状态', align: 'center', width: 120,
                    templet: function (d) {
                        var html = '<span class="black">待上报</span>';
                        if (d.check_status == 1) {
                            html = '<span class="blue">审核中</span>';
                        }
                        else if (d.check_status == 2) {
                            html = '<span class="green">审核通过</span>';
                        }
                        else if (d.check_status == 3) {
                            html = '<span class="red">审核不通过</span>';
                        }
                        else if (d.check_status == 4) {
                            html = '<span class="red">已撤销</span>';
                        }
                        else if (d.check_status == 5) {
                            html = '<span class="green">已开具</span>';
                        }
                        else if (d.check_status == 10) {
                            html = '<span class="yellow">已作废</span>';
                        }
                        return html;
                    }
                }, {
                    field: 'status', title: '发放状态', align: 'center', width: 120,
                    templet: function (d) {
                        if (d.status == 1) {
                            html = '<span class="green">已发放</span>';
                        }
                        else {
                            html = '<span class="yellow">未发放</span>';
                        }
                        return html;
                    }
                }, {
                    field: 'right',
                    fixed: 'right',
                    title: '操作',
                    align: 'center',
                    templet: function (d) {
                        var html = '<div class="layui-btn-group">';
                        var btn1 = '';
                        var btn2 = '';
                        var btn3 = '';
                        var btn6 = '';
                        if (d.check_status == 0 || d.check_status == 3 || d.check_status == 4) {
                            btn2 = '<span class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</span>';
                            btn3 = '<span class="layui-btn layui-btn-normal layui-btn-xs" lay-event="report">上报</span>';
                        }
                        if (d.status == 0 && d.check_status == 2) {
                            btn6 = '<span class="layui-btn layui-btn-danger layui-btn-xs" lay-event="fafang" style="background-color: #5fb878">确认发放</span>';
                        }
                        var btn5 = '<span class="layui-btn layui-btn-normal layui-btn-xs" lay-event="view">查看明细</span>';
                        return html + btn1 + btn2 + btn3 + btn5 + btn6 + '</div>';

                    }
                }
                ]
            ]
        });

        //表头工具栏事件
        table.on('toolbar(test)', function (obj) {
            if (obj.event === 'produce') {
                addEvent();
            }
            if (obj.event === 'LAYTABLE_EXCEL') {
                var formSelect = form.val('barsearchform');
                formSelect.limit = 99999;
                $.ajax({
                    url: '/finance/salary/index',
                    data: formSelect,
                    success: function (res) {
                        table.exportFile('test', res.data, 'xls');
                    }
                });
                return;
            }
        });
        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'report') {
                tool.side('/finance/salary/report?id=' + data.id);
                return;
            }

            if (obj.event === 'view') {
                tool.side('/finance/salary/detail?id=' + data.id);
                return;
            }
            if (obj.event === 'del') {
                layer.confirm('确定要删除吗?', {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    let callback = function (e) {
                        layer.msg(e.msg);
                        if (e.code == 0) {
                            obj.del();
                        }
                    }
                    tool.delete("/finance/salary/delete", {id: data.id}, callback);
                    layer.close(index);
                });
            }

            if (obj.event === 'fafang') {
                layer.confirm('确定发放薪资吗?', {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    let callback = function (e) {
                        layer.msg(e.msg);
                        if (e.code == 0) {
                            layer.close(index);
                            layui.pageTable.reload();
                        }
                    }
                    tool.delete("/finance/salary/fafang", {id: data.id}, callback);
                });
            }
        });

        //监听搜索提交
        form.on('submit(webform)', function (data) {
            layui.pageTable.reload({
                where: {
                    keywords: data.field.keywords,
                    cate_id: data.field.cate_id,
                    type: data.field.type,
                    check_status: data.field.check_status
                },
                page: {
                    curr: 1
                }
            });
            return false;
        });

        function addEvent() {
            var detail = {};
            var year = '';
            if (detail.year == 2023) {
                year = '2023';
            }
            else if (detail.year == 2024) {
                year = '2024';
            }
            else if (detail.year == 2025) {
                year = '2025';
            }
            else if (detail.year == 2026) {
                year = '2026';
            }
            else if (detail.year == 2027) {
                year = '2027';
            } else if (detail.year == 2028) {
                year = '2028';
            } else if (detail.year == 2029) {
                year = '2029';
            }
            var month = '';
            if (detail.month == '01') {
                month = '01';
            } else if (detail.month == '02') {
                month = '02';
            }
            else if (detail.month == '03') {
                month = '03';
            }
            else if (detail.month == '04') {
                month = '04';
            }
            else if (detail.month == '05') {
                month = '05';
            } else if (detail.month == '06') {
                month = '06';
            } else if (detail.month == '07') {
                month = '07';
            }
            else if (detail.month == '08') {
                month = '08';
            }
            else if (detail.month == '09') {
                month = '09';
            }
            else if (detail.month == '10') {
                month = '10';
            } else if (detail.month == '11') {
                month = '11';
            } else if (detail.month == '12') {
                month = '12';
            }

            var content = '<form class="layui-form" style="width:828px">\
							<table class="layui-table" style="margin:15px 15px 0;">\
								<tr>\
								<td class="layui-td-gray">薪资发放标题<font>*</font></td>\
								<td><input name="title" class="layui-input" value="" lay-verify="required" placeholder="请输入薪资发放标题" lay-reqText="请输入薪资发放标题"></td>\
									<td class="layui-td-gray">薪资发放年份<font>（薪资对应的年）</font></td>\
									<td>\
										<div class="layui-input" id="year" style="width:120px; line-height:35px;">' + year + '</div>\
									</td>\
									<td class="layui-td-gray">薪资发放月份<font>（薪资对应的月）</font></td>\
									<td>\
										<div class="layui-input" id="month" style="width:120px; line-height:35px;">' + month + '</div>\
									</td>\
								</tr>\
							</table>\
						</form>';
            layer.open({
                type: 1,
                title: '薪资生成',
                area: ['860px', '390px'],
                content: content,
                success: function () {

                    form.render();

                    $('[name="title"]').on('input', function () {
                        var _val = $(this).val();
                        detail.title = _val;
                    });

                    dropdown.render({
                        elem: '#year'
                        , data: [{
                            title: '2023',
                            id: 2023
                        }, {
                            title: '2024',
                            id: 2024
                        }, {
                            title: '2025',
                            id: 2025
                        }, {
                            title: '2026',
                            id: 2026
                        }, {
                            title: '2027',
                            id: 2027
                        }, {
                            title: '2028',
                            id: 2028
                        }, {
                            title: '2029',
                            id: 2029
                        }]
                        , click: function (obj) {
                            this.elem.html(obj.title);
                            detail.year = obj.id;
                        }
                        , style: 'width: 120px;'
                    });
                    dropdown.render({
                        elem: '#month'
                        , data: [{
                            title: '01',
                            id: '01'
                        }, {
                            title: '02',
                            id: '02'
                        }, {
                            title: '03',
                            id: '04'
                        }, {
                            title: '04',
                            id: '04'
                        }, {
                            title: '05',
                            id: '05'
                        }, {
                            title: '06',
                            id: '06'
                        }, {
                            title: '07',
                            id: '07'
                        }, {
                            title: '08',
                            id: '08'
                        }, {
                            title: '09',
                            id: '11'
                        }, {
                            title: '10',
                            id: '11'
                        }, {
                            title: '11',
                            id: '11'
                        }, {
                            title: '12',
                            id: '12'
                        }]
                        , click: function (obj) {
                            this.elem.html(obj.title);
                            detail.month = obj.id;
                        }
                        , style: 'width: 120px;'
                    });
                },
                btn: ['开始生成'],
                btnAlign: 'c',
                yes: function (idx) {

                    if (!detail.title) {
                        layer.msg('请填写薪资发放标题');
                        return;
                    }
                    if (!detail.year) {
                        layer.msg('请填写薪资发放年份');
                        return;
                    }
                    if (!detail.month) {
                        layer.msg('请填写薪资发放月份');
                        return;
                    }
                    layer.close(idx);
                    tool.side('/finance/salary/produce?title=' + detail.title + '&year=' + detail.year + '&month=' + detail.month);

                }
            })
        }
    }
</script>
{/block}
<!-- /脚本 -->
